<template>
  <div class="home-container">
    <!-- 头部横幅 -->
    <div class="banner">
      <h1>欢迎来到健身馆</h1>
      <p>专业健身，健康生活</p>
    </div>

    <!-- 介绍区域 -->
    <div class="section intro">
      <h2>关于我们</h2>
      <p>
        我们是一家专业的健身中心，致力于为每一位会员提供最优质的健身体验。
        无论您是健身新手还是资深爱好者，我们都有适合您的课程和设施。
      </p>
    </div>

    <!-- 特色服务 -->
    <div class="section services">
      <h2>我们的服务</h2>
      <div class="service-list">
        <div class="service-item">
          <div class="service-icon">🏋️</div>
          <h3>专业器械</h3>
          <p>配备国际一流健身器材</p>
        </div>
        <div class="service-item">
          <div class="service-icon">👥</div>
          <h3>私教课程</h3>
          <p>专业教练一对一指导</p>
        </div>
        <div class="service-item">
          <div class="service-icon">🧘</div>
          <h3>团体课程</h3>
          <p>丰富多样的团体训练课程</p>
        </div>
      </div>
    </div>

    <!-- 会员福利 -->
    <div class="section benefits">
      <h2>会员福利</h2>
      <ul>
        <li>免费体测和健身计划制定</li>
        <li>不限次数使用所有设施</li>
        <li>免费参与团体课程</li>
        <li>专属储物柜</li>
        <li>免费毛巾和洗浴用品</li>
      </ul>
    </div>

    <!-- 联系信息 -->
    <div class="section contact">
      <h2>联系我们</h2>
      <p>地址：弗雷尔卓德</p>
      <p>电话：010-12345678</p>
      <p>营业时间：周一至周日 6:00-22:00</p>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 40px 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.banner p {
  font-size: 18px;
  opacity: 0.9;
}

.section {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 22px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.section p {
  color: #666;
  line-height: 1.6;
  font-size: 16px;
}

.service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
}

.service-item {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  background: #f9f9f9;
}

.service-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.service-item h3 {
  margin: 10px 0 5px;
  color: #333;
}

.service-item p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.benefits ul {
  padding-left: 20px;
}

.benefits li {
  margin-bottom: 8px;
  color: #666;
  line-height: 1.5;
}

.contact p {
  margin: 8px 0;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 15px;
  }

  .banner h1 {
    font-size: 24px;
  }

  .banner p {
    font-size: 16px;
  }

  .service-list {
    flex-direction: column;
  }

  .service-item {
    width: 100%;
  }
}
</style>
